<template>
    <div class="scroll-container" ref="container">
        <div class="scroll-content" :style="{ transform: `translateY(${translateY}px)` }">
            <div v-for="(item, index) in swiperList" :key="index" class="rectangle">
                <div class="name">{{ item.name }}</div>
                <div class="text">{{ item.text }}</div>
            </div>
            <!-- 克隆元素实现无缝滚动 -->
            <div v-for="(item, index) in items" :key="`clone-${index}`" class="rectangle">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AutoScrollRectangles',
    data() {
        return {
            items: ['内容1', '内容2', '内容3', '内容4', '内容5'], // 可自定义内容
            translateY: 0,
            animationFrameId: null,
            scrollSpeed: 0.5, // 滚动速度(px/frame)
            swiperList: [
                {
                    name: "追*人",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-1.webp",
                    text: "从一个焦头烂额的会计小白，到成为老板的得力小助手。就因为我发现了这个网站。专业人员给了我很大的帮助。",
                },
                {
                    name: "学**调",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-2.webp",
                    text: "和朋友成立新公司，不太懂流程，无意中遇到了小竹财税。专业人员反馈及时，价格也合理，希望小竹财税能一直陪伴我们到公司步入正轨。",
                },
                {
                    name: "派*星",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-3.webp",
                    text: "这个平台真是太强大了，分门别类的服务项目，给不同需求的创业人提供帮助。是每一个创业人的最强劲的定心丸。",
                },
                {
                    name: "182****5136",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-4.jpg",
                    text: "专业的事情交给专业的人去做。最近公司有些业务上的变动，不知道如何操作，小竹财税给我们提供了最专业的服务，解决了大难题。",
                },
                {
                    name: "大*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-5.webp",
                    text: "这是一个很专业的平台。客服很耐心的解答了我的疑问，给我找到了一个最合适的服务商快速又完美的解决了我的问题。",
                },
                {
                    name: "七*七",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-6.webp",
                    text: "注册个公司，很快就搞好了，提供基本信息就不用管了，比我自己跑省心多了。",
                },
                {
                    name: "笛*塔",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-8.webp",
                    text: "小姐姐服务热情周到，体验感很好，期待下次合作！全程服务周到，不用操心，很专业，值得推荐！",
                },
                {
                    name: "巨贵**起",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-9.jpg",
                    text: "新公司想找个代账的，不知道哪家好，找到他们推荐了个，他们平台居然收了代账公司保证金，代账还是多了份保障的。",
                },
                {
                    name: "156****0263",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-10.jpg",
                    text: "整体来说还不错，服务很及时，报着试一试的心态，没想到很快就给回复了。业务范围挺广的，跨市的业务对接的也很快。",
                },
                {
                    name: "杨*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-11.webp",
                    text: "公司分公司的会计辞职了，前任会计账做的一团糟，因为这个原因迟迟招不到新会计，专门找了小竹企服把多年的账务、税务给梳理整理一遍，招到了新会计，解决了燃眉之急！",
                },
                {
                    name: "Marjor",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-12.webp",
                    text: "抱着多问一家的心态，联系了小竹。没想到，发布需求没几分钟，就有工作人员联系我了，工作人员很专业，沟通很顺畅。可惜没评价，不然一定打五星！",
                },
                {
                    name: "无*夏",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-13.jpg",
                    text: "第一次用就种草了，沟通省心，办事快，以后不用到处比价联系了，就它了！",
                },
            ],
        }
    },
    mounted() {
        this.startScrolling()
    },
    beforeDestroy() {
        this.stopScrolling()
    },
    methods: {
        startScrolling() {
            const scroll = () => {
                this.translateY -= this.scrollSpeed

                // 当滚动到原始内容的高度时，重置位置实现无缝滚动
                const contentHeight = this.items.length * 128 // 每个矩形高度108px + 间距20px
                if (Math.abs(this.translateY) >= contentHeight) {
                    this.translateY = 0
                }

                this.animationFrameId = requestAnimationFrame(scroll)
            }
            this.animationFrameId = requestAnimationFrame(scroll)
        },
        stopScrolling() {
            if (this.animationFrameId) {
                cancelAnimationFrame(this.animationFrameId)
            }
        }
    }
}
</script>

<style scoped>
.scroll-container {
    width: 350px;
    height: 526px;
    overflow: hidden;
    position: relative;
}

.scroll-content {
    position: absolute;
    width: 100%;
    transition: transform 0.1s linear;
}

.rectangle {
    width: 350px;
    background-color: white;
    border-radius: 10px;
    margin: 20px auto;
    padding: 15px 20px 18px;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

.name {
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    color: #000B1A;
}

.text {
    padding-top: 5px;
    font-weight: 400;
    font-size: 14px;
    color: #000B1A;
    line-height: 20px;
}
</style>